
<template>
  <div id=view></div>
</template>

<script setup>
import { nextTick, onMounted,ref } from 'vue';
import CodeMirror from 'codemirror'
import 'codemirror/mode/javascript/javascript.js';
import "codemirror/theme/neat.css"; //主题css
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/merge/merge.js'
import 'codemirror/addon/merge/merge.css'
import { diff_match_patch } from 'diff-match-patch';
window.diff_match_patch = diff_match_patch;
window.DIFF_DELETE = -1;
window.DIFF_INSERT = 1;
window.DIFF_EQUAL = 0;

const diffCode = () => {
  CodeMirror.MergeView(document.getElementById("view"), {
      theme: "neat",// 主题
      value: '新版本',//历史版本 - 在右侧  - 不可编辑
      origRight: null,
      orig: '历史版本',//新版本 - 在左侧  - 可编辑
      lineNumbers: true,//显示行号
      mode: "text/html",
      highlightDifferences: true,
      connect: 'align',
      readOnly: false,//只读
  });
}
onMounted(() => {
  nextTick(() => {
      diffCode()
  })
})

</script>
<style scoped>
::v-deep .CodeMirror-merge {
  height: 100vh;
}
/* 新增的样式 */
::v-deep .CodeMirror-merge-r-inserted {
  background-color: rgba(81, 183, 149, 0.563) !important;
  background-image: none;
}

::v-deep .CodeMirror-merge-r-deleted {
  background-color: rgba(253, 27, 2, 0.548) !important;
  background-image: none;
}
</style>